<template>
  <view class="page_content">
    <view class="page_title">
      <view class="title_text">请填写收款人姓名</view>
      <view class="title_step">
        <text class="now_step">1</text>/3
      </view>
    </view>
    <view class="form_box">
      <view class="form_item">
        <view class="item_title">姓名</view>
        <view class="item_value">
          <AtInput
            name='value2'
            :border="false"
            type='text'
            placeholder='请填写真实姓名'
            size="small"
            :value="userName"
            @change="inputName"
          />
        </view>
      </view>
      <view class="form_item">
        <view class="item_title">微信</view>
        <view class="item_value">
          <AtInput
            name='value2'
            :border="false"
            type='text'
            placeholder='请输入微信号'
            size="small"
            :value="wxNumber"
            @change="inputWX"
          />
        </view>
      </view>
      <view class="form_item">
        <view class="item_title">手机号</view>
        <view class="item_value">
          <AtInput
            name='value2'
            :border="false"
            type='phone'
            placeholder='请输入手机号'
            size="small"
            :value="mobile"
            @change="inputMobile"
          />
        </view>
      </view>
      <view class="form_item">
        <view class="item_title">验证码</view>
        <view class="item_value">
          <AtInput
            name='value2'
            :border="false"
            type='text'
            size="small"
            placeholder='请输入验证码'
            :value="verify_code"
            @change="inputVerify"
          >
            <view class="code_button" v-if="code_status == 1" @tap="sendCode">获取验证码</view>
            <view class="code_disable" v-if="code_status == 2">{{code_second}}秒后重试</view>
          </AtInput>
        </view>
      </view>
    </view>
    <view class="submit_button" @tap="next()">下一步</view>
  </view>
</template>
<script>
import Taro from '@tarojs/taro'
import './user.scss'
export default {
  data(){
    return{
      userName: "",
      wxNumber: "",
      mobile: "",
      verify_code: "",
      code_status: 1,
      code_second: 60
    }
  },
  methods: {
    inputName(val){
      this.username = val;
    },
    inputWX(val){
      this.wxNumber = val;
    },
    inputMobile(val) {
      this.mobile = val;
    },
    inputVerify(val) {
      this.verify_code = val;
    },
    sendCode(){
      this.code_status = 2;
      this.setSecond()
    },
    setSecond(){
      if(this.code_second == 0){
        this.code_second = 60;
        this.code_status = 1;
      }else{
        setTimeout(() => {
          this.code_second--;
          this.setSecond();
        }, 1000);
      }
    },
    next(){
      Taro.navigateTo({
        url: "store"
      })
    }
  } 
}
</script>